<template>
    <div class="home">
        <!-- 首页 -->
        <!-- <div>
            <img src="../assets/img.png" v-show="show" alt="" />
        </div>
        <div class="box">
            <el-button @click="handleClose">关闭</el-button>
            <el-button @click="handleClick">点击</el-button>
        </div> -->
        <div class="title">欢迎使用电气故障专家库系统</div>
        <img src="../assets/R-C.jpg" alt="" class="img-top" />
        <div class="home-title">
            电气故障专家库系统是一款集电气故障查询、故障统计、知识库浏览与分析于一体的综合性平台，旨在整合电气故障领域的专业知识和实践经验，为广大电气工程师、维修人员以及相关行业从业者提供一个便捷、高效的电气故障解决方案查询与学习平台。通过本系统强大的故障查询功能，用户可以通过输入故障类型、故障设备、专家等方式，在系统中快速定位到相关的故障信息和解决方案，并且系统支持多种查询方式，并可根据用户需求进行智能推荐，帮助用户快速找到最适合的解决方案。本系统汇聚了大量的电气领域的专家团队，专家团队具备丰富的实践经验和深厚的专业知识，能够为用户提供高质量的电气故障解决方案。此外，本系统还建立了一个丰富的电气故障知识库，知识库中包含了大量的电气故障相关问题和解决方案等内容，用户可以通过浏览知识库，查找和学习电气故障的相关知识和处理方法。本系统还提供了用户友好的操作界面和便捷的使用指南，用户可以通过简单的操作，轻松上手使用系统。同时，系统还提供了详细的用户指南和帮助信息，帮助用户解决在使用过程中遇到的问题。
        </div>
        <div class="container">
            <div class="team">
                <p>专家团队</p>
                <div class="team-item">
                    <img src="../assets/图片1.png" alt="" />
                    <div class="team-item-info">
                        <div class="info">
                            <span class="info-label">姓名：</span>
                            <span>黄康刚</span>
                        </div>
                        <div class="info">
                            <span class="info-label">职位：</span>
                            <span>高级电气工程师</span>
                        </div>
                        <div class="info">
                            <span class="info-label">电话：</span>
                            <span>15712345678</span>
                        </div>
                    </div>
                </div>
                <!-- <el-divider></el-divider> -->
                <div class="team-item">
                    <img src="../assets/图片2.png" alt="" />
                    <div class="team-item-info">
                        <div class="info">
                            <span class="info-label">姓名：</span>
                            <span>江佳芸</span>
                        </div>
                        <div class="info">
                            <span class="info-label">职位：</span>
                            <span>高级电气工程师</span>
                        </div>
                        <div class="info">
                            <span class="info-label">电话：</span>
                            <span>15739945268</span>
                        </div>
                    </div>
                </div>
                <!-- <el-divider></el-divider> -->
                <div class="team-item">
                    <img src="../assets/图片3.png" alt="" />
                    <div class="team-item-info">
                        <div class="info">
                            <span class="info-label">姓名：</span>
                            <span>吴俊民</span>
                        </div>
                        <div class="info">
                            <span class="info-label">职位：</span>
                            <span>中级电气工程师</span>
                        </div>
                        <div class="info">
                            <span class="info-label">电话：</span>
                            <span>16652648596</span>
                        </div>
                    </div>
                </div>
            </div>
            <el-divider direction="vertical" class="divider"></el-divider>
            <div class="problem">
                <p>使用系统常见问题</p>
                <ul @click="handleClick">
                    <li class="problem-item" data-id="1">
                        1.如何使用故障查询功能查找电气故障信息？
                    </li>
                    <li class="problem-item" data-id="2">
                        2.在进行故障查询时未找到相关结果怎么办？
                    </li>
                    <li class="problem-item" data-id="3">
                        3.如何更新个人信息或修改密码？
                    </li>
                    <li class="problem-item" data-id="4">
                        4.如何向系统进行反馈？
                    </li>
                    <li class="problem-item" data-id="5">
                        5.如何查看专家的信息？
                    </li>
                </ul>
            </div>

            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
                <p>{{ tips }}</p>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false"
                        >确 定</el-button
                    >
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
const map = {
    1: "在系统主页或导航栏中，找到并点击“电气故障知识库”以及类似的选项，这将带您进入故障查询的专用界面。在故障查询界面，您会看到多个查询字段或选项，根据您知道的故障信息，选择相应的查询方式。输入完查询条件后，点击“查询”或“搜索”按钮。系统将根据您的查询条件，在数据库中检索相关的故障信息和解决方案，随后系统将展示与您的查询条件匹配的故障信息和解决方案列表，您可以浏览列表中的结果，查看每个故障信息的详细描述、可能的原因、解决方案等等。",
    2: "如果在进行故障查询时未找到相关结果，那么可以通过系统的用户反馈功能来提交您的相关故障信息，之后请耐心等待，在专家看到后会及时进行提供解决您所描述的故障的相关原因和解决方案。",
    3: "如果您想更改个人信息，可以点击进入系统的个人中心，在里面能看到并修改您的个人信息。",
    4: "如果您想向系统进行反馈您的想法或者评价，可以点击进入系统的用户反馈页面，在里面可以提交您的反馈。",
    5: "如果您向查看相关的电气专家，可以点击进入系统的电气故障专家页面，里面展示了所有的电气故障专家的详细信息便于您查看。",
};

export default {
    name: "HomeView",
    data() {
        return {
            count: 0,
            show: false,
            tips: "",
            dialogVisible: false,
        };
    },

    methods: {
        handleClick(e) {
            if (e.target.nodeName.toLowerCase() == "li") {
                this.tips = map[Number(e.target.dataset.id)];
                this.dialogVisible = true;
            }
        },

        handleClose() {
            this.show = false;
            this.count = 0;
        },
    },
};
</script>

<style lang="less">
.home {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: relative;
    .img-top {
        width: 100%;
        height: 40vh;
    }

    .title {
        position: absolute;
        z-index: 1000;
        top: 10vh;
        left: 16vw;
        height: 10vw;
        line-height: 10vw;
        font-weight: 600;
        font-size: 70px;
        text-align: center;
        color: #fff;
    }

    .home-title {
        text-indent: 2;
        font-size: 18px;
        line-height: 30px;
    }

    .container {
        display: flex;

        .team {
            width: 40%;

            p {
                font-weight: 600;
                font-size: 20px;
            }

            &-item {
                display: flex;
                margin-bottom: 30px;

                img {
                    width: 150px;
                }

                &-info {
                    margin-left: 20px;

                    .info {
                        margin-bottom: 20px;

                        .info-label {
                            font-weight: 600;
                        }
                    }
                }
            }
        }

        .divider {
            height: 500px;
        }

        .problem {
            width: 60%;
            padding-left: 30px;

            p {
                font-weight: 600;
                font-size: 20px;
            }

            ul {
                padding: 0;

                .problem-item {
                    list-style-type: none;
                    color: #409eff;
                    width: fit-content;
                    cursor: pointer;
                    margin-bottom: 20px;
                }
            }
        }
    }
}
</style>
